<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { ElDialog, ElMessage } from 'element-plus'

// 定义组件的 props 和 emits
const props = defineProps<{
  title?: string
  width?: string | number
}>()

// 响应式数据
const dialogVisible = ref(false)
const videoUrl = ref('')
const videoRef = ref<HTMLVideoElement>()
const loading = ref(false)

// 初始化方法
const init = async (url: string) => {
  if (!url) {
    ElMessage.warning('请提供有效的视频 URL')
    return
  }
  videoUrl.value = url
  dialogVisible.value = true
  
  // 等待 DOM 更新后开始播放
  await nextTick()
  playVideo()
}

// 播放视频
const playVideo = () => {
  if (videoRef.value) {
    loading.value = true
    videoRef.value.load() // 重新加载视频
    
    // 监听视频加载完成事件
    videoRef.value.addEventListener('loadeddata', () => {
      loading.value = false
      videoRef.value?.play().catch((error) => {
        console.error('视频播放失败:', error)
        ElMessage.error('视频播放失败，请检查视频地址是否正确')
      })
    })
    
    // // 监听视频加载错误事件
    // videoRef.value.addEventListener('error', handleLoadFailed)
  }
}

function handleLoadFailed(err) {
  loading.value = false
  console.log('handleLoadFailed',err)
  ElMessage.error('视频加载失败，请检查视频地址是否正确')
}

// 关闭弹窗
const handleClose = () => {
  // videoRef.value?.removeEventListener('ended', handleLoadFailed)
  dialogVisible.value = false
  // 停止播放并重置视频
  if (videoRef.value) {
    videoRef.value.pause()
    videoRef.value.currentTime = 0
  }
  videoUrl.value = ''
}

// 暴露方法给父组件
defineExpose({
  init
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="props.title || '视频播放'"
    :width="props.width || '800px'"
    :before-close="handleClose"
    align-center
    destroy-on-close
  >
    <div class="video-container">
      <div v-if="loading" class="loading-container">
        <Icon icon="ep:loading" class="loading-icon" :size="32" />
        <span>视频加载中...</span>
      </div>
      
      <video
        v-show="!loading"
        ref="videoRef"
        class="video-player"
        controls
        preload="metadata"
        :src="videoUrl"
      >
        您的浏览器不支持视频播放
      </video>
    </div>
    
    <!-- <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template> -->
  </el-dialog>
</template>

<style lang="scss" scoped>
.video-container {
  position: relative;
  width: 100%;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  border-radius: 4px;
  overflow: hidden;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #fff;
  
  .loading-icon {
    animation: spin 1s linear infinite;
  }
  
  span {
    font-size: 14px;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.video-player {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: contain;
}

.dialog-footer {
  text-align: center;
}

// 深度选择器，调整 dialog 样式
:deep(.el-dialog) {
  .el-dialog__body {
    padding: 20px;
  }
}
</style>